import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import wishAction from '../../redux/action/wishAction'
import List from '../../components/Wish/List/List'
import './Wish.scss'
import Modal from '../../components/Common/Modal'
class Wish extends PureComponent {
    state = {
        isModalVisible: false,
        content: '确定要清除我的想看吗?'
    }
    back = () => {
        this.props.history.goBack()
    }
    clearRecord = () => {
        this.setState({
            isModalVisible:true
        })
    }
    handleOk = () => {
        this.props.wishAction('clearWish', [])
        this.setState({
            isModalVisible:false
        })
    }
    handleCancel = () => {
        this.setState({
            isModalVisible:false
        })
    }
    render() {
        let { wish } = this.props
        let { isModalVisible, content } = this.state
        return (
            <div className='wish'>
                <div id="box">
                    <header className="h">
                        <svg onClick={this.back}
                            t="1640051219559"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="3717"
                            width="30"
                            height="30"
                        >
                            <path
                                d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z"
                                p-id="3718"
                                fill="#ffffff"
                            ></path>
                        </svg>
                        <p>我想看</p>
                        <svg onClick={this.clearRecord}
                            t="1651651406795"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2071"
                            width="30"
                            height="30"
                        >
                            <path
                                d="M840 288H688v-56c0-40-32-72-72-72h-208C368 160 336 192 336 232V288h-152c-12.8 0-24 11.2-24 24s11.2 24 24 24h656c12.8 0 24-11.2 24-24s-11.2-24-24-24zM384 288v-56c0-12.8 11.2-24 24-24h208c12.8 0 24 11.2 24 24V288H384zM758.4 384c-12.8 0-24 11.2-24 24v363.2c0 24-19.2 44.8-44.8 44.8H332.8c-24 0-44.8-19.2-44.8-44.8V408c0-12.8-11.2-24-24-24s-24 11.2-24 24v363.2c0 51.2 41.6 92.8 92.8 92.8h358.4c51.2 0 92.8-41.6 92.8-92.8V408c-1.6-12.8-12.8-24-25.6-24z"
                                p-id="2072"
                                fill="#ffffff"
                            ></path>
                            <path
                                d="M444.8 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24zM627.2 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24z"
                                p-id="2073"
                                fill="#ffffff"
                            ></path>
                        </svg>
                    </header>
                    <div>
                        <div className="contain">
                            <List wish={wish}/>
                            <div style={{ 'width': '100%', 'height': '50px' }}></div>
                        </div>
                    </div>
                </div>
                <Modal handleOk={this.handleOk} handleCancel={this.handleCancel} isModalVisible={isModalVisible} content={content} />
            </div >

        )
    }
}
export default connect(
    state => ({
        wish: state.wish
    }), {
        wishAction
}
)(withRouter(Wish))